<template>
    <div id="app">
        <router-view />
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    setRemSize() {
        const oMeta = document.createElement("meta");
        oMeta.name = "viewport";
        oMeta.id = "viewport";
        const windowWidth = document.body.offsetWidth < window.screen.width ? document.body.offsetWidth : window.screen.width;
        let num = 100;
        if (window.navigator.appVersion.match(/iphone/gi)) {
            oMeta.content = "initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no";
            num = 100;
        } else {
            oMeta.content = "initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no";
        }
        document.getElementsByTagName("head")[0].appendChild(oMeta);
        const remsize = ((windowWidth / 750) * num).toFixed(0);
        document.getElementsByTagName("html")[0].style.fontSize = remsize + "px";
        document.getElementsByTagName("html")[0].dataset.remsize = remsize;
    }
    mounted() {
        this.setRemSize();
    }
}
</script>

<style lang="scss">

</style>
